<template>
    <div style="width: 100%">
        <template>
            <el-header class="p_sys_logo">
                <i class="el-icon-user-solid system_logo"></i>
            </el-header>
            <!-- :default-active="onRoutes" 用于激活当前路径，高亮显示-->
            <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router
                :collapse="collapse">
                <template v-for="item in items">
                    <template v-if="item.subs">
                        <el-submenu :index="item.index">
                            <template slot="title"><i :class="item.icon"></i>
                                <span>{{ item.title }}</span></template>
                            <el-menu-item v-for="(subItem, i) in item.subs" :key="i" :index="subItem.index"><i :class="item.icon"></i><span>{{
                                    subItem.title }}</span>
                            </el-menu-item>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="item.index">
                            <i :class="item.icon"></i><span>{{ item.title }}</span>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
            <!-- </div> -->
        </template>
    </div>
</template>

<script>
    import eventBus from "../../utils/eventBus";
    export default {
        data() {
            return {
                collapse: false,
                items: [
                    {
                        icon: "el-icon-s-home",
                        index: "home", //此处要和router.js的跳转一致，才有高亮效果
                        title: "个人中心",
                    },
                    {
                        icon: "el-icon-menu",
                        index: "homeg",
                        title: "综合管理",
                        subs: [
                            {
                                index: "homeg",
                                title: "首页",
                            },
                            {
                                index: "userCenterall",
                                title: "个人中心",
                            },
                        ],
                    },
                    {
                        icon: "el-icon-setting",
                        index: "manager",
                        title: "设置",
                        subs: [
                            {
                                icon: "el-icon-menu",
                                index: "upload",
                                title: "文件上传",
                            },
                            {
                                index: "modifyUser",
                                title: "修改用户",
                            },
                            {
                                index: "modifyPassword",
                                title: "修改密码",
                            },
                        ],
                    },
                    {
                        icon: "el-icon-setting",
                        index: "readerCenter",
                        title: "读者用户管理",
                        subs: [
                            {
                                icon: "el-icon-setting",
                                index: "readerList",
                                title: "读者用户列表",
                            },
                            {
                                icon: "el-icon-setting",
                                index: "readerAdd",
                                title: "读者用户添加",
                            },
                        ],
                    },
                    {
                        icon: "el-icon-setting",
                        index: "newsCenter",
                        title: "新闻管理",
                        subs: [
                            {
                                index: "newsList",
                                title: "读者用户列表",
                            },
                            {
                                index: "newsAdd",
                                title: "读者用户添加",
                            },
                        ],
                    },
                ],
            };
        },
        //传送数据给header
        created() {
            eventBus.$on("collapse", (msg) => {
                this.collapse = msg;
            });
        },
        computed: {
            onRoutes() {
                return this.$route.path.replace("/", "");
            },
        },
    };
</script>

<style>
    body {
        margin: 0px;
    }

    .p_sys_logo {
        text-align: center;
        margin: 0;
    }

    .system_logo {
        font-size: 38px;
        width: 100%;
        height: 60px;
        /* margin: 0 auto; */
        line-height: 60px;
        color: white;
    }

    .el-aside {
        background-color: #324157;
    }

    /* 二级菜单文字颜色 */
    .el-menu-item,
    .el-submenu__title {
        color: white;
        /*取消鼠标闪烁 */
        caret-color: rgba(0, 0, 0, 0);
    }


    .el-menu-vertical-demo {
        min-height: 100%;
        border: 0px;
    }

    /* 去除鼠标点击、点击后、悬浮的背景色 */
    .el-menu,
    .el-submenu__title:hover,
    .el-menu-item:focus,
    .el-menu-item:hover {
        background-color: transparent;
        color: #409eff;
    }

    /* 二级菜单样式 */
    .el-menu.el-menu--inline {
        background-color: #1f2d3d;
        /* text-align: center; */
    }

    .el-menu--collapse .el-menu-item span,
    .el-menu--collapse .el-submenu .el-submenu__title span {
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        display: inline-block;
    }

    /* 限定宽度，只保留图标 */
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        border: 0px;
        min-height: 400px;
    }
</style>